<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item class="breadcrumb_active_item"
            >签到管理</el-breadcrumb-item
          >
          <el-breadcrumb-item>签到活动列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <div class="coachTrain_order_content">
        <!-- 搜索框 -->
        <el-row>
          <el-col :span="24">
            <div class="coachTrain_order_search">
              <el-input
                v-model="searchKey"
                placeholder="请输入关键词"
                style="width: 200px; margin-left: 10px"
                size="mini"
              ></el-input>
              <el-button
                type="primary"
                size="mini"
                style="margin-left: 5px"
                @click="searchFn()"
                >搜索</el-button
              >
              <el-button
                type="primary"
                size="mini"
                style="margin-left: 5px"
                @click="addchFn()"
                >新增</el-button
              >
            </div>
          </el-col>
        </el-row>
        <!-- 数据列表 -->
        <el-row
          type="flex"
          justify="center"
          v-if="orderListData != undefined && orderListData.length > 0"
        >
          <el-col :span="24">
            <el-table
              :data="orderListData"
              border
              style="width: 100%"
              size="mini"
            >
              <el-table-column
                type="index"
                label="序号"
                width="50"
                align="center"
              >
              </el-table-column>

              <!-- <el-table-column
                prop="order_number"
                label="订单编号"
                width="220"
                align="center"
              ></el-table-column> -->

              <el-table-column
                prop="title"
                label="标题"
                align="center"
                min-width="220"
              ></el-table-column>
              <el-table-column prop="image_path" label="头像" width="100">
                <template #default="scope">
                  <el-avatar :src="scope.row.image_path" />
                </template>
              </el-table-column>
              <el-table-column
                prop="start_date"
                label="比赛日期"
                min-width="220"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="address"
                label="地址"
                min-width="220"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="created_at"
                label="创建时间"
                align="center"
                width="180"
              ></el-table-column>

              <el-table-column
                prop="open_signin"
                label="是否开启签到 "
                width="120"
                align="center"
                :formatter="formatterStatusFn"
              ></el-table-column>
              <el-table-column label="操作" width="350" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="detailFn(scope.row)"
                    >查看</el-button
                  >
                  <el-button
                    size="mini"
                    type="primary"
                    @click="whitelist(scope.row.id)"
                    >手机号白名单</el-button
                  >
                  <el-button
                    size="mini"
                    type="primary"
                    @click="modify(scope.row)"
                    >修改</el-button
                  >
                  <el-button
                    size="mini"
                    type="primary"
                    @click="reomss(scope.row.id)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row
          type="flex"
          justify="center"
          v-if="orderListData != undefined && orderListData.length > 0"
        >
          <el-col :span="24">
            <div class="coachTrain_order_pagination">
              <el-pagination
                @size-change="listSizeChange"
                @current-change="listCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </el-col>
        </el-row>
        <el-row v-else>
          <el-empty description="暂无签到"></el-empty>
        </el-row>
      </div>
    </el-row>
    <el-dialog
      width="50%"
      :center="true"
      :visible.sync="dialogFormVisible"
      title="修改"
      :closed="cancelBtn"
    >
      <el-form :model="dialogForm" ref="ruleFormRef">
        <el-form-item label="标题:" prop="title" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.title" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="图片:"
          prop="image_path"
          :label-width="formLabelWidth"
        >
          <el-upload
            v-model="dialogForm.image_path"
            class="dl-avatar-uploader-min square"
            action="#"
            :http-request="uploadFile"
            :show-file-list="false"
            :before-upload="beforeImageUpload"
            :on-success="handleUpImage"
            list-type="picture-card"
            accept="image/*"
          >
            <el-image
              fit="cover"
              v-if="dialogForm.image_path"
              :src="dialogForm.image_path"
              class="avatar"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            <template #tip>
              <div class="el-upload__tip">
                只能上传图片,且单张图片大小不能超过10MB
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item
          label="比赛开始日期:"
          prop="title"
          :label-width="formLabelWidth"
        >
          <el-input v-model="dialogForm.start_date" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="比赛地址:"
          prop="title"
          :label-width="formLabelWidth"
        >
          <el-input v-model="dialogForm.address" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelBtn()">取消</el-button>
          <!-- 修改 -->
          <el-button type="primary" @click="confirmshow()"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<style src="../../assets/css/order/coachTrainOrder.css" scoped></style>

<script>
import Api from "../../api/index";
export default {
  name: "CoachTrainOrder",
  components: {},
  data() {
    return {
      orderListData: [], // 签到活动列表数据
      currentPage: 1, // 当前页
      pageSizes: [10, 20, 50, 100], // 可选页容量
      pageSize: 10, // 当前页容量
      total: 0, // 总条数
      searchKey: "", //搜索关键词
      checkedLevel: "", // 筛选-等级
      levelList: [], // 等级列表
      orderStatusList: [
        {
          value: 1,
          label: "是",
        },
        {
          value: 2,
          label: "否",
        },
      ],
      loadingKey: false,
      loadingText: "",
      checkedOrderStatus: "", // 筛选-订单状态
      dialogFormVisible: false,
      dialogForm: {
        id: "",
        title: "",
        image_path: "",
        address: "",
        start_date: "",
      },
      formLabelWidth: "100px",
      baseAPIUrl: this.$store.state.baseAPIUrl, //默认路径
    };
  },
  mounted() {
    this.getListDataFn();
  },
  methods: {
    // 搜索按钮
    searchFn() {
      this.currentPage = 1;
      this.getListDataFn();
    },
    // 等级筛选
    checkedLevelChange(val) {
      this.checkedLevel = val;
      this.getCheckedExamListFn();
    },
    // 订单状态筛选
    checkedOrderStatusChange(val) {
      this.checkedOrderStatus = val;
    },
    // 查询列表数据
    getListDataFn() {
      let that = this;
      let url = "/admin/signin/index";
      let data = {
        page: this.currentPage,
        perPage: this.pageSize,
        keywords: this.searchKey,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          console.log(response);
          that.loadingKey = false;
          if (response.code == 0) {
            console.log(response.list);
            that.orderListData = response.list;
            that.total = response.total_count;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // // 设置单元格字体颜色
    // cellStyleFn: function ({ row, columnIndex }) {
    //   let style = "";
    //   if (columnIndex == 5) {
    //     style = "color: #F6705E";
    //   }
    //   if (columnIndex == 6) {
    //     if (row.order_status == 1 || row.order_status == 6) {
    //       style = "color: #F6705E";
    //     } else {
    //       style = "color: #8ECF5F";
    //     }
    //   }
    //   return style;
    // },
    //新增签到活动

    // 订单状态格式化
    formatterStatusFn(row) {
      let orderStatus = row.open_signin;
      console.log(orderStatus);
      let text = "";
      this.orderStatusList.forEach(function (item) {
        if (item.value == orderStatus) {
          text = item.label;
        }
      });
      return text;
    },
    // 等级格式化
    formatterLeveFn(row) {
      let exam_level = row.exam_level;
      let text = "";
      this.levelList.forEach(function (item) {
        if (item.key == exam_level) {
          text = item.value;
        }
      });
      return text;
    },
    // 页容量改变
    listSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getListDataFn();
    },
    // 当前页改变
    listCurrentChange(val) {
      this.currentPage = val;
      this.getListDataFn();
    },
    // 查看详情
    detailFn(row) {
      console.log(row.id);
      const routeUrl = this.$router.resolve({
        name: "signForm",
      });
      window.open(routeUrl.href + "?id=" + row.id + "&key=3", "_blank");
    },
    //新增签到活动
    addchFn() {
      const routeUrl = this.$router.resolve({
        name: "addchfc",
      });
      window.open(routeUrl.href);
    },
    cancelBtn() {
      this.dialogFormVisible = false;
    },
    confirmshow() {
      let url = "/admin/signin/update";
      let data = {
        id: this.dialogForm.id,
        image_path: this.dialogForm.image_path,
        title: this.dialogForm.title,
        start_date: this.dialogForm.start_date,
        address: this.dialogForm.address,
      };
      this.axios.post(url, data).then((res) => {
        if (res.code == 0) {
          this.getListDataFn();
          this.dialogFormVisible = false;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //修改签到活动列表
    modify(item) {
      this.dialogFormVisible = true;
      // console.log(item);
      this.dialogForm.image_path = item.image_path;
      this.dialogForm.id = item.id;
      this.dialogForm.title = item.title;
      this.dialogForm.address = item.address;
      this.dialogForm.start_date = item.start_date;
    },
    //删除签到活动列表
    reomss(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url = "/admin/signin/destroy";
        let data = {
          id: id,
        };

        this.axios
          .post(url, data)
          .then((res) => {
            if (res.code == 0) {
              this.$message.success("删除成功");
              this.getListDataFn();
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      });
    },
    whitelist(id) {
      const routeUrl = this.$router.resolve({
        name: "whitelist",
      });
      window.open(routeUrl.href + "?id=" + id);
    },
    // 自定义上传图片
    async uploadFile(e) {
      //   console.log(e);
      let formData = new FormData();
      formData.append("source", 5);
      formData.append("file", e.file);
      let res = await Api.uploadFile(formData);
      if (res.code == 0) {
        console.log(this.baseAPIUrl + res.file_path);
        this.dialogForm.image_path = this.baseAPIUrl + res.file_path;
        console.log(this.dialogForm.image_path, "sjdsjdjsdj");
      } else {
        this.$message.error(res.code.msg);
      }
    },
    // 上传成功，获取返回的图片地址
    handleUpImage(res) {
      console.log(res);
    },
    // 上传前，限制的上传图片大小
    beforeImageUpload(file) {
      console.log(file);
      if (file.size / 1024 / 1024 > 1) {
        console.log("000");
        this.$message.error("上传图片大小不能超过 10MB!");
        return false;
      }
      return true;
    },
  },
};
</script>
